<template>
	<view class="container">
		<!-- <u-navbar autoBack title="" bgColor="transparent" leftIconColor="#26282b" titleStyle="#fff" leftIconSize="46rpx"
			placeholder>
		</u-navbar> -->
		<FeNavbar />
		<view class="page-title">账号信息</view>
		<view class="page-body">
			<view class="account-list">
				<view class="accout-item" v-for="(value,key,index) in accountList" :key="index"
					@click="handleItemSelect(key,index)">
					<view class="avatar-box">
						<image :src="value.avatarUrl" mode="aspectFill"></image>
					</view>
					<view class="accout-info">
						<view class="nickname">{{key}}</view>
						<view class="desc">{{value.userName || "未设置用户名称"}}</view>
					</view>
					<image v-if="selectKey == key" class="check-icon" src="/static/mine/gou.png" mode="aspectFit">
					</image>
					<image v-else class="right-arrow" src="/static/mine/row-right.png" mode="aspectFit">
					</image>
				</view>

				<!-- <view class="accout-item">
					<view class="avatar-box">
						<image src="/static/mine/add.png" mode="aspectFill"></image>
					</view>
					<view class="accout-info">
						<view class="nickname">新增账号</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="bottom-btn" @click="handleExit">退出登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectKey: "",
				accountList: {},
			};
		},
		onLoad() {
			this.accountList = uni.getStorageSync("localAccountList");
			const userInfo = getApp().globalData.userInfo;
			for (let key in this.accountList) {
				if (this.accountList[key].email == userInfo.email) {
					this.selectKey = key;
				}
			}
		},
		methods: {
			handleItemSelect(key) {
				if (key == this.selectKey) return
				uni.showModal({
					title: "切换账号",
					content: "确定切换此账号登录吗？",
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: "切换中...",
								mask: true
							})
							getApp().globalData.userInfo = this.accountList[key];
							uni.setStorageSync("userInfo", this.accountList[key]);

							// 切换账号标识，供订单页面刷新使用
							uni.setStorageSync("changeAccount_refresh_order", true);
							uni.setStorageSync("changeAccount_refresh_mine", true);

							uni.hideLoading();
							uni.showToast({
								title: "切换成功"
							})
							this.selectKey = key;
						}
					}
				})
			},
			handleExit() {
				uni.showModal({
					title: "退出登录",
					content: "确定退出登录吗？",
					success: res => {
						if (res.confirm) {
							uni.removeStorageSync("userInfo");
							getApp().globalData.userInfo = {};
							// getApp().handleQuitLogin();
							uni.switchTab({
								url: '/pages/tabbar/home/home'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		.page-title {
			height: 70rpx;
			font-size: 50rpx;
			font-weight: 600;
			color: #26282B;
			line-height: 70rpx;
			padding: 0 32rpx;
			margin: 32rpx 0 24rpx 0;
		}

		.page-body {
			flex: 1;

			.account-list {
				padding: 0 32rpx;

				.accout-item {
					display: flex;
					align-items: center;
					height: 148rpx;

					.avatar-box {
						width: 96rpx;
						height: 96rpx;
						background-color: #f7f7f7;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.accout-info {
						flex: 1;
						margin-left: 32rpx;

						.nickname {
							font-size: 30rpx;
							line-height: 35rpx;
							font-weight: 600;
							color: #26282B;
						}

						.desc {
							font-size: 26rpx;
							line-height: 30rpx;
							font-weight: 400;
							color: #A6ACB4;
							margin-top: 8rpx;
						}
					}

					.check-icon {
						width: 44rpx;
						height: 44rpx;
					}

					.right-arrow {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}

		.bottom-btn {
			width: 670rpx;
			height: 92rpx;
			line-height: 92rpx;
			text-align: center;
			font-size: 30rpx;
			color: #26282B;
			background-color: #EEF1F6;
			border-radius: 12rpx;
			margin: 0 auto 60rpx auto;
		}
	}
</style>